<template>
  <div class="">
    <form class="tower-form">
      <span class="txt">设备名称</span>
      <el-input v-model="deviceName" size="medium" clearable class="inline-input" placeholder="请输入" />

      <span class="txt">标段</span>
      <el-select class="inline-input" size="medium" v-model="bidSection" clearable placeholder="请选择">
        <el-option
          v-for="item in biaoduanList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>

      <el-button type="primary" size="medium" icon="el-icon-search" style="margin-left:40px" @click="getTowerInfo">查询</el-button>
    </form>

    <el-table :data="towerCraneList" size="small" :height="tableHeight" v-loading="loading" style="width: 100%;">
      <el-table-column prop="deviceName" label="设备名称"></el-table-column>
      <el-table-column prop="equipmentModel" label="设备型号"></el-table-column>
      <el-table-column prop="bidName" label="标段"></el-table-column>
      <el-table-column prop="forearmLength" label="前臂长">
        <template slot-scope="scope">
          <span>{{ scope.row.forearmLength }} m</span>
        </template>
      </el-table-column>
      <el-table-column prop="behindLength" label="后臂长">
        <template slot-scope="scope">
          <span>{{ scope.row.behindLength }} m</span>
        </template>
      </el-table-column>
      <el-table-column prop="topLength" label="塔壁高">
        <template slot-scope="scope">
          <span>{{ scope.row.topLength }} m</span>
        </template>
      </el-table-column>
<!--      <el-table-column prop="diaozhong" label="吊重次数"></el-table-column>-->
<!--      <el-table-column prop="chaozai" label="超载次数"></el-table-column>-->
<!--      <el-table-column prop="chaozailv" label="超载率"></el-table-column>-->
<!--      <el-table-column prop="chaozailv" label="使用频率"></el-table-column>-->
      <el-table-column prop="maxLoad" label="最大载重">
        <template slot-scope="scope">
          <span>{{ scope.row.maxLoad }} kg</span>
        </template>
      </el-table-column>
      <el-table-column prop="committeeNumber" label="建委编号"></el-table-column>
      <el-table-column prop="manufactor" label="生产厂家"></el-table-column>
      <el-table-column prop="propertyUnit" label="产权单位"></el-table-column>
<!--      <el-table-column prop="siji" label="司机信息" width="160">-->
<!--        <template slot-scope="scope">-->
<!--          <div v-for="item in scope.row.siji" :key="item.id">-->
<!--            <span>{{ item.name }}</span>-->
<!--            <span>{{ item.idNum }}</span>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column prop="createTime" label="时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleTowerInfo(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="delTowerInfo(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :pageData="pageData" @pageNum="pageNumData" @pageSize="pageSizeData"></Pagination>
  </div>
</template>

<script>
  import Pagination from "../Pagination";
  import httpInterface from "../../../util/httpInterface";
  import { mapState } from "vuex";

  export default {
    name: "TowerCraneList",
    components: {
      Pagination
    },
    data() {
      return {
        loading: false,
        pageData: {
          total: 0,
          pageNum: 1,
          pageSize: 20
        },
        towerCraneList: [],
        tableHeight: 0,
        deviceName: "",
        bidSection: ""
      }
    },

    computed: {
      ...mapState(["biaoduanList"])
    },

    created() {
      this.getTableHeight();
    },

    mounted() {
      let _this = this;
      window.onresize = function () {
        if (_this.resizeFlag) {
          clearTimeout(_this.resizeFlag)
        }
        _this.resizeFlag = setTimeout(() => {
          _this.getTableHeight();
          _this.resizeFlag = null;
        }, 300)
      };
    },

    beforeDestroy() {
      window.onresize = null;
    },

    methods: {
      getTableHeight() {
        let tableH = 220;
        let tableHeightDetil = window.innerHeight - tableH;
        if (tableHeightDetil <= 300) {
          this.tableHeight = 300;
        } else {
          this.tableHeight = tableHeightDetil;
        }
      },

      pageNumData (page) {
        this.pageData.pageNum = Number(page);
        this.getTowerInfo();
      },

      pageSizeData (page) {
        this.pageData.pageSize = Number(page);
        this.getTowerInfo();
      },

      getTowerInfo() {
        this.loading = true;
        let _this = this;
        let { deviceName, bidSection, pageData } = this;
        let params = {
          page: pageData.pageNum,
          size: pageData.pageSize
        };
        if (deviceName) {
          params.deviceName = deviceName;
        }
        if (bidSection) {
          params.bidSection = bidSection;
        }
        httpInterface.requestGet(this, httpInterface.URL_FIND_PAGE, params, (res) => {
          let data = res.data;
          if (data.success) {
            let { rows, total } = data.other;
            _this.loading = false;
            rows.forEach(item => {
              _this.biaoduanList.forEach(row => {
                if (item.bidSection == row.id) {
                  item.bidName = row.name;
                }
              })
            })
            _this.towerCraneList = rows;
            _this.pageData.total = total;
          } else {
            _this.loading = false;
            _this.errorMessage('数据加载失败！');
          }
        }, (err) => {
          _this.loading = false;
          _this.errorMessage('数据加载失败！');
        })
      },

      handleTowerInfo(row) {
        this.$emit('itemInfo', row);
      },

      delTowerInfo(row) {
        this.$confirm('删除当前数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let _this = this;
          let params = {
            craneId: row.id
          };
          httpInterface.requestGet(this, httpInterface.URL_DELETE_BY_CRANE_ID, params, (res) => {
            let data = res.data;
            if (data.success) {
              _this.getTowerInfo();
              _this.successMessage('删除成功！');
            } else {
              _this.errorMessage('删除失败！');
            }
          }, (err) => {
            _this.errorMessage('删除失败！');
          })
        }).catch(() => {});
      }
    }
  }
</script>

<style scoped lang="scss">
  .tower-form{
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .txt {
      margin-right: 10px;
      font-size: 14px;
    }

    .inline-input {
      width: 150px;
      margin-right: 22px;
    }
  }
</style>
